<style lang="scss">
.imgs{
  width: 680rpx;
  padding:  20rpx 35rpx;
  flex-wrap: wrap;
}
.img{
  width: 200rpx;
  height: 200rpx;
  margin-right: 10px;
  margin-bottom: 10px;
  .add{
    border:1px solid #ebedf0;
    width: 196rpx;
    height: 196rpx;
    padding-top: 32px;
    box-sizing: border-box;
  }
}
</style>
<template>

  <view class="mall-info flex padding10 bgwhite line15">
    <view class="fullbg" style="width: 60px;height: 60px;background-image:url('{{purchaser.goods_logo}}')">
    </view>
    <view class="info padding10 font16 flex-item">
      <view class="info-line line10">{{ purchaser.goods_title}}</view>
      <view class="c6">{{purchaser.goods_spec}}</view>
<!--      <view class="info-line"><view class="price">￥{{ purchaser.sellfprice }}</view></view>-->
    </view>
  </view>


  <view class="control">

    <view>
      <view class="imgs flex bgwhite">
<!--        <view wx:for="{{imgs_temp}}" @tap="del({{index}})" class="img fullbg" style="background-image:url('{{item}}')"></view>-->
        <image wx:for="{{imgs_temp}}" @tap="del({{index}})" class="img" src="{{item}}" mode="aspectFill" ></image>
        <view class="img" hidden="{{imgs_temp.length>8}}" >
          <view class="add text-center" @tap="upImg()">
            <van-icon color="#e1e1e1" size="30px" name="plus"></van-icon>
          </view>
        </view>
      </view>
      <van-cell-group>
        <van-cell title="评分">
          <van-rate value="{{ rate }}" bind:change="onChange"  color="#09BB07" size="16" />
        </van-cell>
        <van-field
          value="{{ remark }}"
          label="具体评价"
          type="textarea"
          placeholder="请输入评价"
          autosize
          bind:input="bindRemarkInput"
          border="{{ false }}"
        />
      </van-cell-group>
    </view>

    <view class="margin15"><van-button size="large" class="margin15-r" type="primary" @tap="sub">提交</van-button></view>
  </view>


</template>

<script>
  import wepy from 'wepy'
  import Toast from '../../lib/vant/lib/toast/toast'
  import {host as baseUrl} from "../../utils/conf";
  import {uploadImg} from '../../lib/utils'

  export default class OrderScore extends wepy.page {
    config = {
      navigationBarTitleText: '订单评论',
      'usingComponents': {
        'van-button': '../../lib/vant/lib/button/index',
        'van-icon': '../../lib/vant/lib/icon/index',
        'van-dialog': '../../lib/vant/lib/dialog/index',
        'van-field': '../../lib/vant/lib/field/index',
        'van-toast': '../../lib/vant/lib/toast/index',
        'van-card': '../../lib/vant/lib/card/index',
        "van-rate": "../../lib/vant/lib/rate/index",
        "van-tag": "../../lib/vant/lib/tag/index",
        "van-cell": "../../lib/vant/lib/cell/index",
        "van-cell-group": "../../lib/vant/lib/cell-group/index"
      }
    }
    components = {

    }

    data = {
      purchaser:{},
      order_list_id:null,
      rate:0,
      content:'',
      imgs_temp:[],imgs:[]

    }

    computed = {

    }

    methods = {
      onChange(e) {
        this.rate = e.detail
        this.$apply()
      },
      del(e){
        this.imgs_temp.splice(e,1)
        this.$apply()
      },
      bindRemarkInput(e){
        // console.log(e)
        this.content = e.detail
        this.$apply()
      },
      upImg(){


        var self = this;
        var allow = 9-self.imgs_temp.length;
        wx.chooseImage({
          count: allow,
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success (res) {
            // tempFilePath可以作为img标签的src属性显示图片
            self.imgs_temp = self.imgs_temp.concat(res.tempFilePaths)
            self.$apply();

          }
        })


      }


    }

    events = {

    }

    sub(){

      if(!this.rate)wx.fail('请评星')
      if(!this.content)wx.fail('请填写评价')
      wx.showLoading({title:'图片上传中'});
      this.subFunc(this.imgs_temp.concat([]));
    }

    subFunc(localIds){

      var self = this;

      var localId = localIds.pop();

      console.log(localIds,localId)

      uploadImg(localId,function (res) {
        //加入url
        var ret = JSON.parse(res);
        self.imgs.push(ret.data);
        self.$apply();

        if (localIds.length > 0) {
          self.subFunc(localIds);
        }

        if (localIds.length == 0) {

          wx.$post('/order/score',{action:'post','order_list_id':self.order_list_id,'content':self.content,'recommend_exponent':self.rate,'imgs':self.imgs.join('|')})
            .then(res=>{
              wx.hideLoading();
              if(res.code===1){
                wx.success('发布成功');
                wx.navigateBack();
              }else{
                wx.showModal({title:'操作失败',content:res.msg})
              }

            })
            .catch()




        }

      })







    }



    onLoad(options) {

      let self = this;

self.order_list_id = options.order_list_id;
      wx.$post('/order/score',{'order_list_id':options.order_list_id,action:'get'}).then(res=>{
        self.purchaser = res.data;
        self.$apply()
      }).catch(e=>{})




    }
  }
</script>
